<template>
  <div>
    <div class="tlitle"> 周末去哪 </div>
    <ul>
        <li class="item border-bottom" v-for="item of list" :key="item.id">
            <div class="item-img-wrapper">
                <img class="item-img" :src="item.imgUrl"/>
            </div>
            <div class="item-info">
                <p class="item-title">{{item.title}}</p>
                <p class="item-desc">{{item.desc}}</p>
            </div>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeWeekend',
  props:{
      list: Array
  }
}
</script>

<style lang="scss" scoped>
    @import '~styles/varibles.scss';
   .tlitle{
       line-height: .8rem;
       background: #eee;
       text-indent: .2rem;
   }
   .item{
       .item-img-wrapper{
         height: 0;
         overflow: hidden;
         padding-bottom: 37.09%;
         .item-img{
           width: 100%;
         }
       }
       .item-info{
           padding:0.1rem 0.2rem;
           .item-title{
               line-height: .54rem;
               font-size: .32rem;
               @include ellipsis()
           }
           .item-desc{
               line-height: .4rem;
               color: #ccc;
               @include ellipsis()
           }
       }
   }
</style>
